import itemBg from "./assets/21166.svg";
import Module from "./module";

export default defineComponent({
	name: "DeviceMonitor",
	setup() {
		return () => (
			<Module title={"设备监控"}>
				<div className={"w-full h-full"}>
					<div className={"w-full h-1/2 grid grid-cols-3 grid-rows-2"}>
						<DeviceMonitorItem img={itemBg} title={"外遮阳"} value={"开启"}></DeviceMonitorItem>
						<DeviceMonitorItem img={itemBg} title={"内遮阳"} value={"开启"}></DeviceMonitorItem>
						<DeviceMonitorItem img={itemBg} title={"顶开窗"} value={"开启"}></DeviceMonitorItem>
						<DeviceMonitorItem img={itemBg} title={"侧开窗"} value={"故障"}></DeviceMonitorItem>
						<DeviceMonitorItem img={itemBg} title={"温控阀"} value={"开启"}></DeviceMonitorItem>
						<DeviceMonitorItem img={itemBg} title={"灌溉阀"} value={"关闭"}></DeviceMonitorItem>
					</div>
					<div className={"w-full h-1/2 p-2 "}>
						<DeviceTable></DeviceTable>
					</div>
				</div>
			</Module>
		);
	}
});

const DeviceMonitorItem = defineComponent({
	name: "DeviceMonitorItem",
	props: { img: String, title: String, value: String },
	setup(props) {
		const status = ref();
		onMounted(() => {
			nextTick(() => {
				switch (props.value) {
					case "开启":
						status.value.style.color = "#1DFFED";
						break;
					case "故障":
						status.value.style.color = "#FF3B3B";
						break;
					case "关闭":
						status.value.style.color = "#FFB60C";
						break;
				}
			});
		});
		return () => (
			<div className={"m-2 relative"}>
				<img className={"w-full h-full"} src={props.img} alt={""} />
				<div className={"w-fit h-fit absolute left-0 right-0 mx-auto top-[12px]"}>{props.title}</div>
				<div className={"w-fit h-fit absolute left-0 right-0 mx-auto bottom-[16px]"} ref={status}>
					{props.value}
				</div>
			</div>
		);
	}
});

const DeviceTable = defineComponent({
	name: "DeviceTable",
	setup() {
		return () => (
			<table className={"w-full h-full border-collapse"}>
				<thead
					className={"text-center"}
					style={{
						background: "url('src/views/dashboard/agriculture/assets/3877.svg') no-repeat",
						"background-size": "100% 100%"
					}}
				>
					<tr>
						<td>执行时间</td>
						<td>设备</td>
						<td>执行动作</td>
						<td>执行结果</td>
					</tr>
				</thead>
				<tbody className={"text-center"}>
					<tr>
						<td>10：00</td>
						<td>外遮阳</td>
						<td>开启</td>
						<td>已执行</td>
					</tr>
					<tr>
						<td>12：00</td>
						<td>侧开窗</td>
						<td>开启</td>
						<td>未执行</td>
					</tr>
					<tr>
						<td>14：00</td>
						<td>外遮阳</td>
						<td>开启</td>
						<td>已执行</td>
					</tr>
				</tbody>
			</table>
		);
	}
});
